<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>资产上报 - 资产管理系统</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4e73df;
            --secondary-color: #f8f9fa;
            --dark-color: #343a40;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
            --info-color: #17a2b8;
            --light-color: #f8f9fa;
            --muted-color: #6c757d;
        }

        body {
            background-color: #f8f9fc;
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 14px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .navbar {
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
            padding: 0.5rem 0;
            background-color: var(--primary-color);
            transition: background-color 0.3s ease;
            width: 100%;
        }

        .navbar:hover {
            background-color: #4367d6;
        }

        .navbar-brand {
            font-weight: 600;
            font-size: 1.35rem;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .container {
            width: 85%;
            max-width: 85%;
            padding-bottom: 1.5rem;
            flex: 1;
            margin: 0 auto;
        }

        .form-container {
            background: white;
            padding: 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
            margin-bottom: 1.5rem;
            border: 1px solid #e3e6f0;
            max-width: 800px;
            margin: 2rem auto;
        }

        h2 {
            color: var(--dark-color);
            margin: 0 0 1.5rem 0;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid #e3e6f0;
            font-size: 1.4rem;
            font-weight: 600;
        }

        .form-label {
            font-weight: 500;
            margin-bottom: 0.3rem;
            font-size: 13px;
            color: #5a5c69;
        }

        .form-label.required:after {
            content: '*';
            color: var(--danger-color);
            margin-left: 4px;
        }

        .form-control,
        .form-select {
            padding: 0.375rem 0.75rem;
            border: 1px solid #d1d3e2;
            border-radius: 0.35rem;
            font-size: 13px;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #bac8f3;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
        }

        .btn-primary {
            background-color: var(--primary-color);
            border: none;
            padding: 0.5rem 1rem;
            font-weight: 600;
            font-size: 13px;
            transition: all 0.2s;
        }

        .btn-primary:hover {
            background-color: #3a5bc7;
        }

        .btn-animated {
            position: relative;
            overflow: hidden;
        }

        .btn-animated:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.3);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%);
            transform-origin: 50% 50%;
        }

        .btn-animated:active:after {
            animation: ripple 0.6s ease-out;
        }

        @keyframes ripple {
            0% {
                transform: scale(0, 0);
                opacity: 0.5;
            }
            100% {
                transform: scale(20, 20);
                opacity: 0;
            }
        }

        .image-preview-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 8px;
        }

        .image-preview {
            height: 80px;
            width: auto;
            border-radius: 3px;
            border: 1px solid #eee;
            object-fit: cover;
        }

        .form-text {
            font-size: 12px;
            margin-top: 3px;
            color: var(--muted-color);
        }

        .nav-link {
            position: relative;
            overflow: hidden;
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            transition: all 0.2s ease;
        }

        .nav-link:not(.active):after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: white;
            transition: width 0.3s ease;
            border-radius: 2px;
        }

        .nav-link:not(.active):hover:after {
            width: 100%;
        }

        .nav-link.active {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .navbar-brand svg {
            transition: transform 0.3s ease;
        }

        .navbar-brand:hover svg {
            transform: scale(1.1);
        }

        .btn-outline-light {
            border-width: 1.5px;
        }

        footer {
            background-color: white;
            border-top: 1px solid #e3e6f0;
            padding: 1rem 0;
            margin-top: auto;
            width: 100%;
        }

        .footer-links {
            display: flex;
            gap: 1rem;
        }

        .footer-links a {
            color: var(--muted-color);
            transition: color 0.2s ease;
        }

        .footer-links a:hover {
            color: var(--primary-color);
            text-decoration: none;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .container {
                width: 95%;
                max-width: 95%;
                padding-left: 15px;
                padding-right: 15px;
            }

            .form-container {
                padding: 1rem;
            }

            .image-preview {
                height: 70px;
            }
        }

        @media (max-width: 576px) {
            .container {
                width: 100%;
                max-width: 100%;
            }
        }
    </style>
</head>

<body>
    <div id="app">
        <nav class="navbar navbar-expand-lg navbar-dark">
            <div class="container py-2">
                <!-- 品牌标识 -->
                <a class="navbar-brand" href="#">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4 6H20V20H4V6Z" stroke="white" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <path d="M4 10H20" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M8 6V2" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M16 6V2" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    资产管理系统
                </a>

                <!-- 移动端菜单按钮 -->
                <button class="navbar-toggler py-1" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                    style="border-color: rgba(255,255,255,0.3);">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <!-- 菜单内容 -->
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav me-auto align-items-center gap-1">
                        <li class="nav-item">
                            <a class="nav-link" href="/dashboard">
                                <i class="fa fa-dashboard mr-1"></i> 首页
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="/report">
                                <i class="fa fa-plus-circle mr-1"></i> 资产上报
                            </a>
                        </li>
                    </ul>

                    <div class="d-flex align-items-center">
                       
                        <a href="/logout" class="btn btn-outline-light btn-sm rounded-pill px-4 py-1.5">
                            <i class="fa fa-sign-out mr-1"></i> 退出
                        </a>
                    </div>
                </div>
            </div>
        </nav>

        <div class="container">
            <div class="form-container">
                <h2><i class="fa fa-plus-circle mr-2"></i>资产上报</h2>
                
                <!-- 提示信息 -->
                <div v-if="alert.show" :class="`alert alert-${alert.type} alert-dismissible fade show`" role="alert">
                    {{ alert.message }}
                    <button type="button" class="btn-close" @click="alert.show = false" aria-label="Close"></button>
                </div>
                
                <form @submit.prevent="submitForm" enctype="multipart/form-data">
                    <!-- 资产基本信息 -->
                    <div class="row g-2">
                        <div class="col-md-12">
                            <label for="asset_name" class="form-label required">资产名称</label>
                            <input type="text" class="form-control" id="asset_name" required 
                                   v-model="form.asset_name" placeholder="请输入资产名称">
                        </div>
                    </div>

                    <div class="row g-2 mt-2">
                        <div class="col-md-6">
                            <label for="category_main" class="form-label required">大类</label>
                            <select class="form-select" id="category_main" required v-model="form.category_main">
                                <option value="" disabled>请选择主分类</option>
                                <option v-for="category in categories" :value="category" :key="category">{{ category }}</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="category_sub" class="form-label required">小类</label>
                            <input type="text" class="form-control" id="category_sub" required 
                                   v-model="form.category_sub" placeholder="请输入小类">
                        </div>
                    </div>

                    <div class="row g-2 mt-2">
                        <div class="col-md-4">
                            <label for="unit" class="form-label required">单位</label>
                            <select class="form-select" id="unit" required v-model="form.unit">
                                <option value="" disabled>请选择单位</option>
                                <option v-for="unit in units" :value="unit" :key="unit">{{ unit }}</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="value" class="form-label required">价值</label>
                            <input type="number" class="form-control" id="value" min="0" step="0.01" required
                                v-model="form.value" placeholder="资产价值">
                        </div>
                        <div class="col-md-4">
                            <label for="status" class="form-label required">状态</label>
                            <select class="form-select" id="status" required v-model="form.status">
                                <option value="" disabled>请选择状态</option>
                                <option v-for="status in statuses" :value="status" :key="status">{{ status }}</option>
                            </select>
                        </div>
                    </div>

                    <!-- 资产位置信息 -->
                    <div class="row g-2 mt-2">
                        <div class="col-md-6">
                            <label for="department" class="form-label required">所属部门</label>
                            <input type="text" class="form-control" id="department" required 
                                   v-model="form.department" placeholder="请输入所属部门">
                        </div>
                        <div class="col-md-6">
                            <label for="location" class="form-label required">存放位置</label>
                            <input type="text" class="form-control" id="location" required 
                                   v-model="form.location" placeholder="请输入具体存放位置">
                        </div>
                    </div>

                    <!-- 资产详细信息 -->
                    <div class="row g-2 mt-2">
                        <div class="col-md-4">
                            <label for="service_life" class="form-label">使用年限(年)</label>
                            <input type="number" class="form-control" id="service_life" min="1" 
                                   v-model="form.service_life" placeholder="预计使用年限">
                        </div>
                        <div class="col-md-4">
                            <label for="depreciation_rate" class="form-label">折旧率(%)</label>
                            <input type="number" class="form-control" id="depreciation_rate" min="0" max="100" step="0.1"
                                v-model="form.depreciation_rate" placeholder="年折旧率">
                        </div>
                        <div class="col-md-4">
                            <label for="purchase_date" class="form-label">购买日期</label>
                            <input type="date" class="form-control" id="purchase_date" v-model="form.purchase_date">
                        </div>
                    </div>

                    <div class="row g-2 mt-2">
                        <div class="col-md-6">
                            <label for="manufacturer" class="form-label">生产厂商</label>
                            <input type="text" class="form-control" id="manufacturer" 
                                   v-model="form.manufacturer" placeholder="生产厂商名称">
                        </div>
                        <div class="col-md-6">
                            <label for="model" class="form-label">型号</label>
                            <input type="text" class="form-control" id="model" 
                                   v-model="form.model" placeholder="资产型号">
                        </div>
                    </div>

                    <div class="mb-3 mt-2">
                        <label for="description" class="form-label">详细描述</label>
                        <textarea class="form-control" id="description" rows="2" 
                                  v-model="form.description" placeholder="资产详细描述、备注信息等"></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="images" class="form-label">上传图片 (最多3张，每张不超过1MB)</label>
                        <input type="file" class="form-control" id="images" multiple accept="image/*" 
                               @change="handleImageUpload">
                        <div class="form-text">支持JPEG, PNG, GIF格式</div>
                        <div class="image-preview-container">
                            <img v-for="(preview, index) in imagePreviews" :src="preview" :key="index" 
                                 class="image-preview" @click="removeImage(index)">
                        </div>
                    </div>

                    <div class="d-grid gap-2 mt-3">
                        <button type="submit" class="btn btn-primary btn-animated" :disabled="isSubmitting">
                            <template v-if="isSubmitting">
                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                提交中...
                            </template>
                            <template v-else>
                                <i class="fa fa-save mr-2"></i>提交
                            </template>
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <footer class="mt-auto py-3">
            <div class="container">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
                    <p class="text-sm text-muted mb-2 mb-md-0">© 2025 资产管理系统. TIMI开发</p>
                    <div class="footer-links">
                        <a href="#" class="text-muted">
                            <i class="fa fa-question-circle mr-1"></i> 帮助中心
                        </a>
                        <a href="#" class="text-muted">
                            <i class="fa fa-file-text-o mr-1"></i> 使用手册
                        </a>
                        <a href="#" class="text-muted">
                            <i class="fa fa-envelope-o mr-1"></i> 联系我们
                        </a>
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <script src="/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/vue/vue.global.prod.js"></script>
    <script>
        const { createApp, ref, reactive, onMounted } = Vue;
        
        createApp({
            setup() {
                // 表单数据
                const form = reactive({
                    asset_name: '',
                    category_main: '',
                    category_sub: '',
                    unit: '',
                    value: '',
                    status: '',
                    department: '',
                    location: '',
                    service_life: '',
                    depreciation_rate: '',
                    purchase_date: '',
                    manufacturer: '',
                    model: '',
                    description: '',
                    images: []
                });
                
                // 配置数据
                const categories = ref([]);
                const units = ref([]);
                const statuses = ref([]);
                const subCategories = ref({});
                
                // UI状态
                const isSubmitting = ref(false);
                const imagePreviews = ref([]);
                const alert = reactive({
                    show: false,
                    type: 'success',
                    message: ''
                });
                
                // 加载配置数据
                const loadConfigData = async () => {
                    try {
                        const response = await fetch('public/config.json');
                        if (!response.ok) {
                            throw new Error(`HTTP错误! 状态码: ${response.status}`);
                        }
                        const config = await response.json();
                        
                        // 验证配置数据
                        if (!config.categories || !config.subCategories || !config.units || !config.statuses) {
                            throw new Error('配置文件格式不正确');
                        }
                        
                        // 更新配置
                        categories.value = config.categories;
                        units.value = config.units;
                        statuses.value = config.statuses;
                        subCategories.value = config.subCategories;
                        
                    } catch (error) {
                        console.error('加载配置文件失败:', error);
                        showAlert('danger', '加载配置失败，请刷新页面重试');
                    }
                };
                
                // 显示提示信息
                const showAlert = (type, message) => {
                    alert.type = type;
                    alert.message = message;
                    alert.show = true;
                    
                    // 5秒后自动消失
                    setTimeout(() => {
                        alert.show = false;
                    }, 5000);
                };
                
                // 处理图片上传
                const handleImageUpload = (event) => {
                    const files = event.target.files;
                    
                    // 验证图片数量
                    if (files.length > 3) {
                        showAlert('warning', '最多只能上传3张图片');
                        event.target.value = '';
                        return;
                    }
                    
                    // 清空之前的预览和文件
                    imagePreviews.value = [];
                    form.images = [];
                    
                    // 处理每张图片
                    for (let i = 0; i < files.length; i++) {
                        const file = files[i];
                        
                        // 验证图片大小
                        if (file.size > 1024 * 1024) {
                            showAlert('warning', '图片大小不能超过1MB');
                            event.target.value = '';
                            imagePreviews.value = [];
                            return;
                        }
                        
                        // 创建预览
                        const reader = new FileReader();
                        reader.onload = (e) => {
                            imagePreviews.value.push(e.target.result);
                        };
                        reader.readAsDataURL(file);
                        
                        // 添加到表单数据
                        form.images.push(file);
                    }
                };
                
                // 移除图片
                const removeImage = (index) => {
                    imagePreviews.value.splice(index, 1);
                    form.images.splice(index, 1);
                    
                    // 重置文件输入，因为无法直接修改文件列表
                    const fileInput = document.getElementById('images');
                    fileInput.value = '';
                };
                
                // 表单验证
                const validateForm = () => {
                    const requiredFields = [
                        'asset_name', 'category_main', 'unit', 'value', 'status', 'department', 'location'
                    ];
                    
                    for (const field of requiredFields) {
                        if (!form[field]) {
                            showAlert('warning', `请填写${document.getElementById(field).labels[0].textContent}`);
                            document.getElementById(field).focus();
                            return false;
                        }
                    }
                    
                    // 验证价值是否为有效数字
                    const value = parseFloat(form.value);
                    if (isNaN(value) || value <= 0) {
                        showAlert('warning', '请输入有效的资产价值');
                        document.getElementById('value').focus();
                        return false;
                    }
                    
                    return true;
                };
                
                // 提交表单
                const submitForm = async () => {
                    // 验证表单
                    if (!validateForm()) {
                        return;
                    }
                    
                    isSubmitting.value = true;
                    
                    try {
                        // 准备FormData
                        const formData = new FormData();
                        
                        // 添加表单数据
                        formData.append('asset_name', form.asset_name);
                        formData.append('category_main', form.category_main);
                        formData.append('category_sub', form.category_sub);
                        formData.append('unit', form.unit);
                        formData.append('value', form.value);
                        formData.append('status', form.status);
                        formData.append('department', form.department);
                        formData.append('location', form.location);
                        
                        // 可选字段
                        if (form.service_life) formData.append('service_life', form.service_life);
                        if (form.depreciation_rate) formData.append('depreciation_rate', form.depreciation_rate);
                        if (form.purchase_date) formData.append('purchase_date', form.purchase_date);
                        if (form.manufacturer) formData.append('manufacturer', form.manufacturer);
                        if (form.model) formData.append('model', form.model);
                        if (form.description) formData.append('description', form.description);
                        
                        // 添加图片
                        for (let i = 0; i < form.images.length; i++) {
                            formData.append('images', form.images[i]);
                        }
                        
                        // 发送请求
                        const response = await fetch('/api/reports', {
                            method: 'POST',
                            body: formData
                        });
                        
                        if (!response.ok) {
                            const errorData = await response.json();
                            throw new Error(errorData.error || '服务器返回错误');
                        }
                        
                        // 提交成功
                        showAlert('success', '资产上报成功！');
                        setTimeout(() => {
                            window.location.href = '/dashboard';
                        }, 1500);
                        
                    } catch (error) {
                        console.error('提交失败:', error);
                        showAlert('danger', `上报失败: ${error.message}`);
                    } finally {
                        isSubmitting.value = false;
                    }
                };
                
                // 组件挂载时加载配置
                onMounted(() => {
                    loadConfigData();
                });
                
                return {
                    form,
                    categories,
                    units,
                    statuses,
                    subCategories,
                    isSubmitting,
                    imagePreviews,
                    alert,
                    handleImageUpload,
                    removeImage,
                    submitForm,
                    showAlert
                };
            }
        }).mount('#app');
    </script>
</body>

</html>